<template>
  <div class="reg-form-container">
    <div class="title">注册</div>
    <el-form :model="form" :rules="rulesRegist" ref="form">
      <el-form-item class="input" prop="account">
        <el-input
          auto-complete="off"
          placeholder="请输入账号，账号长度需要6-15个字符"
          maxlength="20"
          v-model="form.account"
        ></el-input>
      </el-form-item>
      <el-form-item class="input password" prop="password">
        <el-input
          type="password"
          auto-complete="off"
          placeholder="请输入密码，长度至少为8位"
          maxlength="20"
          v-model="form.password"
        ></el-input>
      </el-form-item>
      <el-form-item class="input password" prop="rePassword">
        <el-input
          type="password"
          auto-complete="off"
          placeholder="请再次输入密码"
          maxlength="20"
          v-model="form.rePassword"
        ></el-input>
      </el-form-item>
      <el-form-item class="input" prop="phone">
        <el-input
          auto-complete="off"
          placeholder="请输入手机号，长度需要11位"
          maxlength="11"
          v-model="form.phone"
        ></el-input>
      </el-form-item>
      <el-form-item prop="checkCode" class="input">
        <el-input
          type="text"
          v-model="form.checkCode"
          :clearable="true"
          auto-complete="off"
          placeholder="请输入短信验证码"
          maxlength="50"
        >
          <el-button
            style="width: 112px"
            :disabled="codeDisabled"
            slot="append"
            @click="sendAuth"
            >{{ codeText }}</el-button
          >
        </el-input>
      </el-form-item>
      <el-form-item class="input" prop="email">
        <el-input
          auto-complete="off"
          placeholder="请输入注册邮箱地址"
          maxlength="50"
          v-model="form.email"
        ></el-input>
      </el-form-item>
      <el-form-item class="input" prop="entName">
        <el-input
          auto-complete="off"
          placeholder="请输入企业简称，限6个字符"
          maxlength="6"
          v-model="form.entName"
        ></el-input>
      </el-form-item>
      <el-form-item prop="checked">
        <el-row style="flex" justify="space-around">
          <el-col :span="3">
            <el-checkbox v-model="form.checked"></el-checkbox>
          </el-col>

          <el-col :span="18" style="text-align: left">
            <span
              >阅读并接受<span class="c_s_password" @click="openUserPrivacy"
                >《用户协议》</span
              >和<span class="c_s_password" @click="openPrivacy"
                >《隐私声明》</span
              ></span
            >
          </el-col>
        </el-row>
      </el-form-item>
      <el-button
        type="primary"
        class="button"
        ref="button"
        @click="handleSubmit"
      >
        注册
      </el-button>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      baseURL: "https://secondary.csin.net.cn",
      codeText: "发送验证码",
      codeDisabled: false,
      form: {
        account: "",
        password: "",
        rePassword: "",
        phone: "",
        email: "",
        checkCode: "",
        entName: "",
        checked: false,
      },
      rulesRegist: {
        account: [
          {
            required: true,
            message: "账号长度需6-15个字符,请重新输入",
            trigger: "blur",
          },
          {
            min: 6,
            max: 15,
            message: "账号长度需6-15个字符,请重新输入",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "密码需包含字母、数字、符号中的两种以及不小于8个字符",
            trigger: "blur",
          },
          {
            min: 8,
            max: 20,
            message: "密码需包含字母、数字、符号中的两种以及不小于8个字符",
            trigger: "blur",
          },
          //密码需包含字母、数字、符号中的至少两种
          {
            validator: (rule, value, callback) => {
              var passwordreg =
                /(?![A-Z]*$)(?![a-z]*$)(?![0-9]*$)(?![^a-zA-Z0-9]*$)/;

              if (!passwordreg.test(value)) {
                callback(
                  new Error(
                    "密码需包含字母、数字、符号中的两种以及不小于8个字符"
                  )
                );
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        rePassword: [
          // {
          //     required: true,
          //     message: '请输入密码1111',
          //     trigger: 'blur'
          // },
          {
            validator: (rule, value, callback) => {
              if (value !== this.form.password) {
                callback(new Error("两次密码不一致，请重新输入"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
          {
            min: 8,
            max: 20,
            message: "密码需包含字母、数字、符号中的两种以及不小于8个字符",
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            message: "请输入手机号,长度需要11位",
            trigger: "blur",
          },
          {
            validator: (rule, value, callback) => {
              // 手机号校验
              if (!/^1[3456789]\d{9}$/.test(value)) {
                callback(new Error("手机号长度需输入11位，请重新输入"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        email: [
          {
            required: true,
            message: "邮箱输入有误，请重新输入",
            trigger: "change",
          },
          {
            validator: (rule, value, callback) => {
              // console.log("罗阳",value)
              setTimeout(() => {
                if (
                  !/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/.test(
                    this.form.email
                  )
                ) {
                  callback(new Error("邮箱输入有误，请重新输入"));
                } else {
                  callback();
                }
              }, 500);
            },
            trigger: "blur",
          },
        ],
        entName: [
          {
            required: true,
            message: "企业简称长度有误，请重新输入",
            trigger: "blur",
          },
          {
            max: 6,
            message: "企业简称长度有误，请重新输入",
            trigger: "blur",
          },
        ],
        checkCode: [
          {
            required: true,
            message: "验证码有误，请重新输入",
            trigger: "blur",
          },
        ],
        checked: [
          //checked值为true时，才能通过校验
          {
            validator: (rule, value, callback) => {
              if (value) {
                callback();
              } else {
                callback(new Error("请勾选同意协议"));
              }
            },
            trigger: "change",
          },
        ],
      },
    };
  },
  mounted() {
    window.addEventListener("keypress", (e) => {
      if (e.key === "Enter") {
        this.handleSubmit();
      }
    });
  },
  methods: {
    openUserPrivacy() {
      this.$emit("openUserPrivacy");
    },
    openPrivacy() {
      this.$emit("openPrivacy");
    },
    async sendAuth() {
      let _self = this;
      _self.$refs["form"].validateField("phone", async (error) => {
        if (!error) {
          const resp = await axios.get(this.baseURL + "/v1/common/code/phone", {
            params: {
              phone: _self.form.phone,
            },
          });
          if (resp.data.success) {
            _self.$message.success("已发送往短信，60s内不能重复操作");
            _self.codeDisabled = true;
            setTimeout(() => {
              _self.codeDisabled = false;
            }, 60000);
          } else {
            _self.$message.error(resp.data.info);
          }
        } else {
          _self.$message.error("请正确填写手机号");
        }
      });
    },

    async reg(f) {
      const resp = await axios.post(this.baseURL + "/v1/register", {
        checkCode: f.checkCode,
        email: f.email,
        password: f.password,
        repeatPassword: f.rePassword,
        phone: f.phone,
        username: f.account,
        entName: f.entName,
      });
      return resp;
    },
    async handleSubmit() {
      this.$refs["form"].validate(async (valid) => {
        if (!valid) {
          this.error = false;
          this.$message.error("请按要求填写所有表单项");
          return;
        }
        const resp = await this.reg(this.form);
        if (resp.data.success) {
          this.$message.success("注册成功，请继续登录");
          location = "http://182.151.11.69:30000/#/login";
        } else {
          this.$message.error(
            "注册失败" + (resp.data.info ? "，" + resp.data.info : "")
          );
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.reg-form-container {
  $height: 680px;
  position: absolute;
  padding: 20px 30px;
  height: $height;
  left: 50%;
  top: Max($height/2 + 40px, 50%);
  transform: translate(-50%, -50%);
  width: 450px;
  //   height: 400px;
  background: white;
  border-radius: 30px;
  .title {
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    padding-bottom: 5px;
    border-bottom: 1px solid #aaa;
    margin-bottom: 20px;
  }
  .input {
    margin-top: 20px;
  }
  .button {
    width: 100%;
    height: 50px;
    font-size: 22px;
    font-weight: bold;
    margin-top: 5px;
  }
  .error-message {
    color: red;
  }

  .c_s_password {
    color: #2563eb;
    cursor: pointer;
  }
}
</style>
